<template>
  <div class="app-container">
    <el-dialog
      :title="dialogTitle"
      id="achieve_dialog-seven"
      append-to-body
      :visible.sync="dialogFormVisible"
      @open="open"
    >
      <el-form
        class="popup-one"
        ref="form"
        :rules="rules"
        :model="form"
        @submit.native.prevent
      >
        <el-form-item label="图号:" prop="imageCode">
          <el-input placeholder="请输入图号" v-model="form.imageCode" @keyup.native="keyUp"></el-input>
        </el-form-item>
        <el-form-item label="产线:" prop="plName">
          <el-input placeholder="请输入产线" v-model="form.plName" @keyup.native="keyUp"></el-input>
        </el-form-item>
        <el-form-item label="单根工时（分）:" prop="workingHour">
          <el-input-number
            v-model="form.workingHour"
            @keyup.native="keyUp"
            controls-position="right"
            @change="handleChange"
            :min="0.1"
            :max="60"
            style="width: 375px"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="单次AGV下线运输量:"
          prop="agvTransVolume"
        >
          <el-input
            placeholder="请输入单次AGV下线运输量"
            v-model.number="form.agvTransVolume"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="下料滞后时间（分）:" prop="blankingLagTime">
          <el-input
            placeholder="请输入下料滞后时间（分）"
            v-model.number="form.blankingLagTime"
            @keyup.native="keyUp"
          ></el-input>
        </el-form-item>
        <el-form-item label="起点站点:" prop="startStationId">
          <el-select
            v-model="form.startStationId"
            filterable
            placeholder="请选择起点站点"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in startdata"
              :key="item.value"
              :label="item.agvCode+'('+item.siteName+')'"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="终点站点:" prop="endStationId">
          <el-select
            v-model="form.endStationId"
            filterable
            placeholder="请选择终点站点"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in positiontype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="mark">
          <el-col :span="10" class="dialog-list-width">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.mark"
              placeholder="请输入备注"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="function-two" @click="cancel">取 消</el-button>
        <el-button class="function-two" type="primary" @click="submitForm"
        >确定
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import _ from "lodash";
import {
  addPreparation,
  getOfflineStartStation,
} from "@/api/BasicConfiguration/offline";
import {listData} from "@/api/system/dict/data";

export default {
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      //当输入的数据有值，值是非空，输入的数据不是数字类型时 进行提示
      if (value && value < 0 && Number.isInteger(value) || (value && value !== "" && typeof value !== 'number')) {
        callback(new Error("下线滞后时间（分）必须为数值类型且不能为负数"));
      } else {
        callback();
      }
    };
    var validatePassAgv = (rule, value, callback) => {
      if (!value || value <= 0 || !Number.isInteger(value)) {
        callback(new Error("单次AGV下线运输量必须为正整数"));
      } else {
        callback();
      }
    };
    return {
      dialogFormVisible: false,
      value: "",
      // 弹出层标题
      dialogTitle: "新增",
      //起点站点
      starStation: {
        iseb: 1,
      },
      startdata: null,
      // 站点数据
      position: 1,
      form: {
        // workingHour: null,
      },
      rules: {
        imageCode: [{required: true, message: "请输入图号", trigger: "blur"}],
        plName: [{required: true, message: "请输入产线", trigger: "blur"}],
        workingHour: [
          {required: true, message: "请选择单根工时（分）", trigger: "blur"},
        ],
        agvTransVolume: [
          {required: true, message: '单次AGV下线运输量不能为空'},
          {type: 'number', message: '单次AGV下线运输量必须为数字值'},
          {
            validator: validatePassAgv,
            trigger: "blur",
          }
        ],
        blankingLagTime: [
          {
            validator: validatePass,
            trigger: "blur",
          }
        ],
        startStationId: [
          {required: true, message: "请选择起点站点", trigger: "change"},
        ],
        endStationId: [
          {required: true, message: "请选择终点站点", trigger: "change"},
        ],
      },
      // 库位的 库位类型
      positiontype: [],
    };
  },
  methods: {
    open() {
      // 初始化库位类型list
      this.getTypeList();
      this.getStarStation()
    },
    /** 获取起点站点 */
    getStarStation() {
      getOfflineStartStation(this.starStation).then((response) => {
        this.startdata = response.data;
      });
    },
    // 初始化库位类型list
    getTypeList() {
      const data = {
        dictType: "position_type",
      };
      // 调用根据数据字典类型查询居委类型列表
      listData(data)
        .then((res) => {
          if (res.data && res.data.list) {
            this.positiontype = res.data.list;
          }
        })
        .catch(() => {
        });
    },
    //单根工时（分）只保留小数点后一位
    handleChange(value) {
      this.form.workingHour = value.toFixed(3);
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = _.cloneDeep(this.form);
          params.workingHour = this.form.workingHour;
          //新增
          params.agvTransVolume = parseInt(params.agvTransVolume);
          if (params.blankingLagTime != "") {
            params.blankingLagTime = parseInt(params.blankingLagTime);
          } else {
            params.preparationLeadTime = parseInt("")
          }
          params.startStationId = parseInt(params.startStationId);
          params.endStationId = parseInt(params.endStationId);
          addPreparation(params)
            .then(() => {
              this.$modal.msgSuccess("新增成功");
              this.dialogFormVisible = false;
              this.reset();
              this.$emit('refresh');
            })
            .catch(() => {
            });
        }
      });
    },
  },
};
</script>
<style scoped>
.search > * {
  padding: 0;
  margin-right: 30px !important;
}

.dialog-list-width {
  width: 155px;
}
</style>
